<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="js/Util.js"></script>
	<script type="text/javascript" src="js/Const.js"></script>
	<script type="text/javascript" >
// Convert player colors from hsl to rgb
for (i = 0, len = PLAYER_COLORS.length; i < len; ++i) {
    PLAYER_COLORS[i] = hsl_to_rgb(PLAYER_COLORS[i]);
}

var cur = 0;
var color_count = 10;

function prev() {
	cur = (cur + color_count - 1) % color_count;
	redraw();
}

function next() {
	cur = (cur + 1) % color_count;
	redraw();
}

function generate() {
	PLAYER_COLORS[cur] = [(256 * Math.random())|0,(256 * Math.random())|0,(256 * Math.random())|0];
	redraw();
}

function pad(num) {
	var txt = '' + num;
	while (txt.length < 3) txt = ' ' + txt;
	return txt;
}

function redraw() {
	var ctx = document.getElementById('canvas').getContext('2d');
	ctx.fillStyle = rgb_to_hex(hsl_to_rgb([236, 100, 24]));
	ctx.fillRect(0,  0,1080,40);
	ctx.fillStyle = SAND_COLOR;
	ctx.fillRect(0, 40,1080,40);
	ctx.fillStyle = 'rgb(' + FOOD_COLOR[0] + ',' + FOOD_COLOR[1] + ',' + FOOD_COLOR[2] + ')';
	ctx.fillRect(0, 80,1080,40);
	ctx.fillStyle = 'rgb(' + PLAYER_COLORS[cur][0] + ',' + PLAYER_COLORS[cur][1] + ',' + PLAYER_COLORS[cur][2] + ')';
	ctx.fillRect(0,120,1080,40);
	var out = document.getElementById('output');
	out.innerHTML = 'var PLAYER_COLORS = [';
	for (var i = 0; i < color_count; i++) {
		if (i) out.innerHTML += ',';
		out.innerHTML += (i % 4 === 0) ? '\n\t' : ' ';
		out.innerHTML += '[ ' + pad(PLAYER_COLORS[i][0]) + ', ' + pad(PLAYER_COLORS[i][1]) + ', ' + pad(PLAYER_COLORS[i][2]) + ' ]';
		ctx.fillStyle = 'rgb(' + PLAYER_COLORS[i][0] + ',' + PLAYER_COLORS[i][1] + ',' + PLAYER_COLORS[i][2] + ')';
		ctx.fillRect(20+i*40,20,40,40);
		ctx.fillRect(20+i*40,100,40,40);
	}
	out.innerHTML += '\n];';
}

function left() {
	if (cur) {
		var tmp = PLAYER_COLORS[cur - 1];
		PLAYER_COLORS[cur - 1] = PLAYER_COLORS[cur];
		PLAYER_COLORS[cur] = tmp;
		cur--;
		redraw();
	}
}

max = PLAYER_COLORS.length;
log = Math.ceil(Math.log(max) / Math.LN2);
mod = 2;
for (i = 0; i < max; i++) {
    hue = (1 + 1.5 * i) % 3;
    if (i % 4 >= 2) {
        hue = (hue + 0.75) % 3;
    }
    if (i % 4 === 0 && i !== 0) {
        hue = (hue + 0.75) % 3;
    }
    for (n = 0; n < 3; n++) {
        diff = Math.abs(hue - n);
        if (diff > 1.5) diff = 3 - diff;
        //PLAYER_COLORS[i][n] = Math.round(255 * Math.max(0, 1 - diff));
    }
}
	</script>
  </head>
  <body onload="redraw()">
    <canvas id="canvas" width="1080" height="160"></canvas><br>
	<input type="button" value="prev" onclick="prev()"/>
	<input type="button" value="generate" onclick="generate()"/>
	<input type="button" value="next" onclick="next()"/>
	<input type="button" value="move left" onclick="left()"/>
	<pre id="output"></pre>
  </body>
</html>
